$defaultWidth: 19px;
$defaultHeight: 33px;
$logoSize: 40px;
$len: 12;
$hue: 360 / $len;

.container {
    position: relative;
    width: $defaultWidth;
    height: $defaultHeight;
}

.logo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: $logoSize;
    height: $logoSize;
    background: center/cover no-repeat;
    cursor: pointer;
    transform: translateX(-50%);
}

.tips {
    position: absolute;
    top: -10px;
    left: 0.5 * ($defaultWidth + $logoSize) + 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.75);
    visibility: hidden;
    opacity: 0;
    @extend %transition;
}

.tips-item {
    position: relative;
    padding-left: 20px;
    color: #ffffff;
    white-space: nowrap;

    &:not(:last-child) {
        margin-bottom: 10px;
    }

    &::before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transform: translateY(-50%);
    }
}

// set color
@for $i from 1 through $len {
    .tips-item:nth-child(#{$i})::before {
        background-color: hsl($hue * ($i - 1), 75%, 60%);
    }
}

.container:hover .tips {
    visibility: visible;
    opacity: 1;
}
